﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="../lib/css/layui.css" rel="stylesheet" type="text/css" />
    <script src="../lib/layui.js"></script>
</head>
<body>


    <blockquote class="layui-elem-quote"> Layui的模板引擎使用</blockquote>

    <div class="layui-row">
        <div class="layui-btn" id="btn1">直接取值</div>
        <pre class="layui-code" lay-title="html代码">
//直接使用内嵌的html模板,以及json数据
        $("#btn1").click(function() {
            layui.laytpl('{{ d.name }}是一个好人').render({
                name: '我们'
            }, function(retValue){
                $("#result").html(retValue); 
            });
        });
        </pre>
        <div class="layui-btn" id="btn2">模板与json取值</div>
        <pre class="layui-code" lay-title="html代码">
//定义模板
        <script type="text/html" id="tpl1">
                {{ d.name }}是一个好人
            </script>
//定义json
var tmpJson1 = { "name": "我们", "flag": "一起努力" };

//渲染
        $("#btn2").click(function () {
            layui.laytpl($('#tpl1').html()).render(tmpJson1
                , function (retValue) {
                $("#result").html(retValue); 
            });
        });
        </pre>

        <div class="layui-btn" id="btn3">模板循环以及判断的使用</div>
        <pre class="layui-code" lay-title="html代码">

//定义模板
            <script type="text/html" id="tpl2">
                <h3>{{ d.Title }}</h3>
                <ul>
                    {{#  layui.each(d.DataList, function(index, item){ }}
                    <li>
                        <span>{{ item.UserName }}</span>
                        <span>{{ item.CellPhone }}</span>
                    </li>
                    {{#  }); }}
                    {{#  if(d.DataList.length === 0){ }}
                    无数据
                    {{#  } }}
                </ul>
            </script>


        </pre>
    </div>
    
<div class="layui-row">结果</div>
<div id="result">

</div>

<script type="text/html" id="tpl1">
    {{ d.name }}是一个好人,{{d.flag}}
</script>

<script type="text/html" id="tpl2">
    <h3>{{ d.Title }}</h3>
    <ul>
        {{#  layui.each(d.DataList, function(index, item){ }}
        <li>
            <span>{{ item.UserName }}</span>
            <span>{{ item.CellPhone }}</span>
        </li>
        {{#  }); }}
        {{#  if(d.DataList.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>


<script>

    var tmpJson1 = { "name": "我们", "flag": "一起努力" };

    var tmpListData = {
        "Title": "统计结果",
        "DataList": [
            { "UserName": "张三","CellPhone":"13862740967"},
            { "UserName": "张三1","CellPhone":"13862740967"}
        ]
    };
   

    var $ = layui.$;

    $(function() {
        $("#btn1").click(function() {
            layui.laytpl('{{ d.name }}是一个好人').render({
                name: '我们'
            }, function(retValue){
                $("#result").html(retValue); 
            });
        });

        $("#btn2").click(function () {
            layui.laytpl($('#tpl1').html()).render(tmpJson1
                , function (retValue) {
                $("#result").html(retValue); 
            });
        });

        $("#btn3").click(function () {
            layui.laytpl($('#tpl2').html()).render(tmpListData
                , function (retValue) {
                    $("#result").html(retValue); 
                });
        });
    });

    layui.code({ encode: true });

  

</script>
</body>
</html>